<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影详情</title>

    <style>
        .detail-wrap{
            width: 100%;
            height: auto;
            position: relative;
            background-image: linear-gradient(to right, #ab9fe3, #ea128a);
            z-index: 1;
            overflow: hidden;
            padding-bottom: 20px;
        }

        .detail-wrap .detail-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 2s ease;
            z-index: -1;
        }

        .detail-wrap .detail-cont{
            width: 100%;
            padding-top: 10px;
            color: #FFF;
            transition: all .3s ease;
        }

        .center-wrap {
            width: 990px;
            min-width: 990px;
            margin: 0 auto;
            *zoom: 1;
        }

        .detail-wrap .detail-cont .cont-title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            border-bottom: 1px solid #7a7a7a;
            border-bottom: 1px solid rgba(255,255,255,.3);
            margin-bottom: 16px;
        }

        .detail-wrap .detail-cont .cont-pic {
            float: left;
            width: 225px;
        }

        .detail-wrap .detail-cont .cont-info {
            float: left;
            width: 590px;
        }
        
    </style>
</head>
<body>
    <div class="detail-wrap">
        <div class="detail-bg" data-th-background="${movie.getImg()}" style="opacity: 0.4;"></div>
        <div class="detail-cont">
            <div class="center-wrap">
                <h3 class="cont-title" th:text="${movie.getName()}"></h3>
                <div class="cont-pic">
                    <img width="230" height="300" th:src="${movie.getImg()}">
                </div>
                <ul class="cont-info">
                    <li th:text="${movie.getMovieDetail().getType()}"></li>
                    <li th:text="${movie.getMovieDetail().getArea()} + '/' +  ${movie.getMovieDetail().getTime()}"></li>
                    <li th:text="${movie.getMovieDetail().getShowTime()}"></li>
                    <li th:text="${movie.getMovieDetail().getIntroduce()}"></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>